<template>
  <el-tabs v-model="select">
    <el-tab-pane class="tab" name="1" label="登陆">
      <form-login @toRegister="toRegister" :showToRegister='true' @success="handleLoginSuccess"/>
    </el-tab-pane>
    <el-tab-pane class="tab" name="2" label="注册">
      <form-register @toLogin='toLogin' :showToLogin='true' @success="handleRegisterSuccess"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import FormLogin from './FormLogin'
import FormRegister from './FormRegister'

export default {
  name: 'TabLoginRegister',
  components: {
    'form-login': FormLogin,
    'form-register': FormRegister
  },
  data: () => {
    return {
      select: '1'
    }
  },
  methods: {
    toRegister () {
      this.select = '2'
    },
    toLogin () {
      this.select = '1'
    },
    handleLoginSuccess () {
      this.$emit('success', 'login')
    },
    handleRegisterSuccess () {
      this.$emit('success', 'register')
    }
  }
}
</script>

<style lang="scss" scoped>
  .tab{
    padding: 10px 20px;
  }
</style>
